<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户列表-成都华联后台管理系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
        <script src="../../layui/layui.js" charset="utf-8"></script>
        <script>var $ = layui.jquery;</script>
    </head>
    <body>

        <table class="layui-hide" id="userList" lay-filter="userList"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-input-inline">
                <input type="text" name="searchInput" placeholder="姓名/手机号"
                       autocomplete="off" id="searchInput"
                       class="layui-input">
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            <button class="layui-btn layui-btn-sm" lay-event="exportUsers">导出</button>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="details">查看积分明细</a>
        </script>

        <script>
            layui.use(['form', 'table'], function () {
                var table = layui.table,
                    form = layui.form
                table.render({
                    elem: '#userList'
                    , url: '/user'
                    , headers: {"method": "selectByPage"}
                    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    , title: '会员信息列表'
                    , cols: [[
                        {
                            field: 'id',
                            title: '序号',
                            width: 100,
                            fixed: 'left',
                            align: 'center',
                            unresize: true,
                            sort: true
                        }
                        , {field: 'phone', title: '手机号', width: 130, align: 'center', sort: true}
                        , {field: 'name', title: '姓名', width: 100, align: 'center', sort: true}
                        , {field: 'regTime', title: '注册时间', width: 180, align: 'center', sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120, align: 'center',}
                    ]]
                    , page: true
                    , limit: 10
                    , limits: [5, 10]
                });

                //头工具栏事件
                table.on('toolbar(userList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'search':
                            //发送搜索的ajax请求
                            table.reload('userList', {
                                headers: {"method": "search"},
                                where: {
                                    searchString: $("#searchInput").val()
                                }
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                                , parseData: function (result) {
                                    layer.msg("搜索到"+result.count+"条记录");
                                }
                            });
                            break;
                        case 'exportUsers':
                            layer.msg("导出中...");
                            window.location.href = '/userExport';
                            break;
                    }
                });

                //监听行工具事件
                table.on('tool(userList)', function (obj) {
                    var data = obj.data;
                    // console.log(data)
                    if (obj.event === 'details') {
                        layer.msg("详情功能开发中...");
                    }
                });

            });
        </script>

    </body>
</html>